<template>
    <div class="contrast-container">
        <search-bar @search="handleSearch"></search-bar>
        <tab @tabChange="handleTab"></tab>
        <div class="contrastList-header">
            <van-checkbox v-model="allChecked" shape="square">
                已选择
                <span class="num">{{selectList.length}}</span> 项
            </van-checkbox>
            <!-- <div class="sort-wrap">
                <sort-caret></sort-caret>
                <sort-caret></sort-caret>
            </div>-->
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
            <contrast-list @listChange="listUpdate" ref="contrastList" :list="list" :type="type"></contrast-list>
        </van-list>
        <div class="btn-wrap">
            <btn :disabled="!selectList.length" @click="submit">生成对比分析图表</btn>
        </div>
    </div>
</template>
<script>
// import SortCaret from "@/components/SortCaret";
import SearchBar from "@/components/SearchBar";
import Tab from "./components/Tab";
import ContrastList from "./components/ContrastList";
import Btn from "@/components/Btn";
export default {
    name: "contrast",
    components: {
        SearchBar,
        Tab,
        ContrastList,
        Btn,
        //SortCaret,
    },

    data() {
        return {
            loading: false,
            finished: false,
            pageNo: 1,
            pageSize: 6,
            list: [],
            allChecked: false,
            selectList: [],
            type: 1,
            examName: "",
        };
    },
    mounted() {
        //this.getData();
    },
    watch: {
        allChecked(newval) {
            if (newval) {
                this.$refs.contrastList.$refs.checkboxGroup.toggleAll(true);
            } else {
                this.$refs.contrastList.$refs.checkboxGroup.toggleAll(false);
            }
        },
    },
    methods: {
        getData() {
            this.loading = true;
            if (this.type === 2) {
                this.$APIs
                    .getTrainScore({
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        examName: this.examName,
                    })
                    .then(data => {
                        if (data.data.length) {
                            this.pageNo += 1;
                            this.list.push(...data.data);
                            this.loading = false;
                        } else {
                            this.finished = true;
                            this.loading = false;
                        }
                    });
            } else {
                this.$APIs
                    .getScore({
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        examName: this.examName,
                    })
                    .then(data => {
                        if (data.data.length) {
                            this.pageNo += 1;
                            this.list.push(...data.data);
                            this.loading = false;
                        } else {
                            this.finished = true;
                            this.loading = false;
                        }
                    });
            }
        },
        handleTab(data) {
            if (this.loading) {
                return;
            }
            this.allChecked = false;
            this.selectList = [];
            this.list = [];
            this.examName = "";
            this.type = data;
            this.pageNo = 1;
            this.getData();
        },
        listUpdate(list) {
            this.selectList = list;
        },
        handleSearch(data) {
            this.list = [];
            this.pageNo = 1;
            this.examName = data;
            this.getData();
        },
        submit() {
            if (this.selectList.length) {
                let arr = this.selectList.map(element => {
                    return element.examId;
                });
                let ids = arr.join(",");
                this.$router.push({
                    path: "/comparative",
                    query: {
                        examId: ids,
                        type: this.type,
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss">
.contrast-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-list {
        flex: 1;
        overflow: scroll;
    }
    .van-checkbox__icon--checked .van-icon {
        color: #56baca;
        border-color: #56baca;
        background-color: #221f2e;
    }
    .van-checkbox__label {
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .num {
            color: #56baca;
        }
    }
    .contrastList-header {
        background: #221f2e;
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
    }
    .btn-wrap {
        background: #161624;
        padding: 15px;
        .btn {
            color: #5e868e;
            border: 1px solid #2e2c3c;
            height: 44px;
            text-align: center;
            line-height: 44px;
            border-radius: 5px;

            &.active {
                background: #56baca;
                color: #fff;
                &:active {
                    opacity: 0.7;
                }
            }
        }
    }
}
</style>
